<template>
	<view>
		<view class="j-page">

			<!-- <view class="j-title-0">班主任工作满意度调查</view>
			<view class="j-title-0">（家长问卷）</view> -->
			<view class="j-message-1">尊敬的家长：</view>
			<view class="j-message-2">
				您好！非常感谢您一直以来对学校工作的支持与配合。为了进一步提升我校教育教学质量，加强班主任队伍建设，我们特开展此次关于班主任工作的满意度调查。您的反馈对我们至关重要，问卷采用匿名形式，请您放心、如实填写。感谢您的支持与参与！
			</view>

			<view v-if="!state.data.id || state.redo">
				<view class="j-title-1">一、基本信息：</view>
				<view class="j-title-2" @click="toSelectClass">
					1. 您孩子所在的班级是：<text
						:style="{color:state.data['item_1_1'] ? 'green' : 'red'}">{{state.data['item_1_1'] || '点击选择'}}</text>
				</view>
				<view class="j-title-1">二、沟通交流：</view>
				<view class="j-title-2">1. 班主任与您主动沟通孩子在校情况的频率是？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_2_1','A')" :style="getItemStyle('item_2_1','A')">A.
					一周多次，沟通频繁且及时</view>
				<view class="j-item j-item-2" @click="setItemValue('item_2_1','B')" :style="getItemStyle('item_2_1','B')">B.
					一月多次，定期沟通孩子近况</view>
				<view class="j-item j-item-3" @click="setItemValue('item_2_1','C')" :style="getItemStyle('item_2_1','C')">C.
					偶尔沟通，在孩子出现特殊情况时才联系</view>
				<view class="j-item j-item-4" @click="setItemValue('item_2_1','D')" :style="getItemStyle('item_2_1','D')">D.
					几乎不沟通，很少主动告知孩子在校状态</view>
				<view class="j-title-2">2. 您与班主任沟通时，对方的态度如何？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_2_2','A')" :style="getItemStyle('item_2_2','A')">A.
					非常热情，耐心解答疑问并积极回应需求</view>
				<view class="j-item j-item-2" @click="setItemValue('item_2_2','B')" :style="getItemStyle('item_2_2','B')">B.
					比较热情，能认真对待沟通内容</view>
				<view class="j-item j-item-3" @click="setItemValue('item_2_2','C')" :style="getItemStyle('item_2_2','C')">C.
					态度一般，只是例行公事地交流</view>
				<view class="j-item j-item-4" @click="setItemValue('item_2_2','D')" :style="getItemStyle('item_2_2','D')">D.
					态度冷淡，不太愿意深入沟通</view>
				<view class="j-title-1">三、班级管理：</view>
				<view class="j-title-2">1. 您对班主任管理班级的方式是否满意？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_3_1','A')" :style="getItemStyle('item_3_1','A')">A.
					非常满意，班级秩序良好，孩子在班级氛围中积极向上</view>
				<view class="j-item j-item-2" @click="setItemValue('item_3_1','B')" :style="getItemStyle('item_3_1','B')">B.
					比较满意，班级管理有序，没有明显问题</view>
				<view class="j-item j-item-3" @click="setItemValue('item_3_1','C')" :style="getItemStyle('item_3_1','C')">C.
					一般，感觉班级管理还可以，但有提升空间</view>
				<view class="j-item j-item-4" @click="setItemValue('item_3_1','D')" :style="getItemStyle('item_3_1','D')">D.
					不满意，班级存在纪律松散等问题，管理效果不佳</view>
				<view class="j-title-2">2. 对于班级组织的各项活动，您认为班主任的组织能力如何？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_3_2','A')" :style="getItemStyle('item_3_2','A')">A.
					组织能力很强，活动丰富多彩，孩子积极参与并收获很大</view>
				<view class="j-item j-item-2" @click="setItemValue('item_3_2','B')" :style="getItemStyle('item_3_2','B')">B.
					组织能力较好，活动能顺利开展，达到一定效果</view>
				<view class="j-item j-item-3" @click="setItemValue('item_3_2','C')" :style="getItemStyle('item_3_2','C')">C.
					组织能力一般，活动形式和内容较为普通</view>
				<view class="j-item j-item-4" @click="setItemValue('item_3_2','D')" :style="getItemStyle('item_3_2','D')">D.
					组织能力差，活动组织混乱，孩子参与度低</view>
				<view class="j-title-1">四、学业关注：</view>
				<view class="j-title-2">1. 您觉得班主任对您孩子学业方面的关心程度如何？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_4_1','A')" :style="getItemStyle('item_4_1','A')">A.
					非常关心，经常反馈孩子学习情况，给予学习建议</view>
				<view class="j-item j-item-2" @click="setItemValue('item_4_1','B')" :style="getItemStyle('item_4_1','B')">B.
					比较关心，能关注到孩子的学习动态并适当提醒</view>
				<view class="j-item j-item-3" @click="setItemValue('item_4_1','C')" :style="getItemStyle('item_4_1','C')">C.
					一般关心，只是偶尔提及孩子的学习成绩</view>
				<view class="j-item j-item-4" @click="setItemValue('item_4_1','D')" :style="getItemStyle('item_4_1','D')">D.
					不太关心，很少主动谈及孩子学业相关内容</view>
				<view class="j-title-2">2. 班主任是否针对孩子的职业发展提供过有效指导？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_4_2','A')" :style="getItemStyle('item_4_2','A')">A.
					提供过很多，详细分析孩子特点，给出明确职业方向和规划建议</view>
				<view class="j-item j-item-2" @click="setItemValue('item_4_2','B')" :style="getItemStyle('item_4_2','B')">B.
					提供过一些，有一定的职业信息介绍和简单的发展建议</view>
				<view class="j-item j-item-3" @click="setItemValue('item_4_2','C')" :style="getItemStyle('item_4_2','C')">C.
					提供较少，仅简单说过一些宽泛的职业概念</view>
				<view class="j-item j-item-4" @click="setItemValue('item_4_2','D')" :style="getItemStyle('item_4_2','D')">D.
					从未提供，没有关于孩子职业发展的任何指导</view>
				<view class="j-title-1">五、家校合作：</view>
				<view class="j-title-2">1. 您是否愿意积极配合班主任开展家校合作工作？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_5_1','A')" :style="getItemStyle('item_5_1','A')">A.
					非常愿意，积极参与学校组织的各项家校活动</view>
				<view class="j-item j-item-2" @click="setItemValue('item_5_1','B')" :style="getItemStyle('item_5_1','B')">B.
					比较愿意，只要时间允许就会配合</view>
				<view class="j-item j-item-3" @click="setItemValue('item_5_1','C')" :style="getItemStyle('item_5_1','C')">C.
					一般，配合学校安排，但主动性不高</view>
				<view class="j-item j-item-4" @click="setItemValue('item_5_1','D')" :style="getItemStyle('item_5_1','D')">D.
					不太愿意，觉得家校合作对孩子帮助不大</view>
				<view class="j-title-2">2. 您认为班主任在家校合作方面的工作做得怎么样？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_5_2','A')" :style="getItemStyle('item_5_2','A')">A.
					非常好，充分调动家长积极性，共同促进孩子成长</view>
				<view class="j-item j-item-2" @click="setItemValue('item_5_2','B')" :style="getItemStyle('item_5_2','B')">B.
					比较好，能与家长保持良好互动，合作顺畅</view>
				<view class="j-item j-item-3" @click="setItemValue('item_5_2','C')" :style="getItemStyle('item_5_2','C')">C.
					一般，家校合作工作按部就班，缺乏创新</view>
				<view class="j-item j-item-4" @click="setItemValue('item_5_2','D')" :style="getItemStyle('item_5_2','D')">D.
					不好，家校沟通不畅，合作效果不理想</view>
				<view class="j-title-1">六、总体评价：</view>
				<view class="j-title-2">1. 您对现任班主任的综合满意度是：</view>
				<view class="j-item j-item-1" @click="setItemValue('item_6_1','A')" :style="getItemStyle('item_6_1','A')">A.
					非常满意
				</view>
				<view class="j-item j-item-2" @click="setItemValue('item_6_1','B')" :style="getItemStyle('item_6_1','B')">B.
					比较满意
				</view>
				<view class="j-item j-item-3" @click="setItemValue('item_6_1','C')" :style="getItemStyle('item_6_1','C')">C. 一般
				</view>
				<view class="j-item j-item-4" @click="setItemValue('item_6_1','D')" :style="getItemStyle('item_6_1','D')">D. 不满意
				</view>
				<view class="j-title-2">2. 您对班主任的工作还有哪些期望或建议？</view>
				<view style="padding: 0 15px;">
					<uni-easyinput type="textarea" autoHeight v-model="state.data.item_6_2"
						placeholder="请输入(可选输入)"></uni-easyinput>
				</view>

				<view>
					再次感谢您的支持与配合！
				</view>
				<view style="text-align: center; color:red;">{{check()}}</view>
				<button type="primary" @click="handleCommit">提交</button>
			</view>

			<view v-else>
				<p style="margin-top: 30px; text-align: center; font-size: 24px; color: green;">感谢您的参与</p>
				<p style="margin-top: 15px; text-align: center; font-size: 24px; color: green;">您的满意度调查已提交</p>

				<view style="margin-top: 30px;">
					<button type="warn" @click="handleRedo()">重新提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		unref,
		onMounted,
	} from 'vue';
	
	import config from '@/jk/config.js'

	onMounted(() => {
		state.data.id = uni.getStorageSync('questionnaire_parent_id') || '';
	})
	const state = reactive({
		redo: false,

		data: {
			id: '',
			item_1_1: '',
			item_2_1: '',
			item_2_2: '',
			item_3_1: '',
			item_3_2: '',
			item_4_1: '',
			item_4_2: '',
			item_5_1: '',
			item_5_2: '',
			item_6_1: '',
			item_6_2: ''
		},
	})
	const fn = (k, v) => {
		return `第${k}大项的第${v}小项还没选择`;
	}
	const validateMessage = {
		item_1_1: '请选择所在班级',
		item_2_1: fn('二', 1),
		item_2_2: fn('二', 2),
		item_3_1: fn('三', 1),
		item_3_2: fn('三', 2),
		item_4_1: fn('四', 1),
		item_4_2: fn('四', 2),
		item_5_1: fn('五', 1),
		item_5_2: fn('五', 2),
		item_6_1: fn('六', 1),
	}

	const setItemValue = (key, value) => {
		state.data[key] = value;

		console.log(state.data)
	}

	const getItemStyle = (key, value) => {
		if (state.data[key] === value) {
			// return {color:'green'}
			return {
				background: 'green',
				color: 'white',
			}
		} else {
			return {}
		}
	}

	const item_list = [
		'2101','2201','2218','2219','2220','2222',
		'2301', '2302', '2303', '2304', '2305', '2306', '2307', '2308', '2309', '2310',
		'2311', '2312', '2313', '2314', '2315', '2316', '2318', '2319', '2320',
		'2321', '2322',
		'2401', '2402', '2403', '2404', '2405', '2406', '2407', '2408', '2409', '2410',
		'2411', '2412', '2413', '2414', '2415', '2416', '2417', '2418',
	]

	const toSelectClass = () => {
		uni.showActionSheet({
			itemList: item_list,
			success: function(res) {
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				console.log(item_list[res.tapIndex])
				setItemValue('item_1_1', item_list[res.tapIndex])
			},
			fail: function(res) {
				console.log(res.errMsg);
			}
		});
	}

	const check = () => {
		for (let key in validateMessage) {
			if (!state.data[key]) {
				console.log(key, validateMessage[key])
				return validateMessage[key];
			}
		}

		return '';
	}

	const handleRedo = () => {
		state.redo = true;
	}

	const handleCommit = () => {
		const err = check();
		if (err) {
			uni.showToast({
				icon: 'error',
				title: err
			})
			console.log({
				err
			})

			return;
		}


		uni.showModal({
			title: '请确认',
			content: '您确认现在提交吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');

					uni.showLoading({
						title: '正在提交'
					})

					state.data.id = uni.getStorageSync('questionnaire_parent_id') || '';

					uni.request({
						method: 'POST',
						url: `${config.rootUrl}/wuxixz/questionnaire/parent/commit`, //仅为示例，并非真实接口地址。
						data: {
							...state.data
						},
						header: {},
						success: (res) => {
							res = res.data;

							console.log(44, res)

							if (res.code === 0) {

								uni.setStorageSync("questionnaire_parent_id", res.result);

								uni.showModal({
									title: '信息',
									content: '提交成功',
									showCancel: false,
									success() {
										state.redo = false;
										state.data.id = res.result;
									}
								})
							} else {
								uni.showModal({
									title: '错误',
									content: `提交失败：${res.message}`,
									showCancel: false,
								})
							}

						},
						fail: (err) => {
							console.log(err);
							uni.showModal({
								title: '错误',
								content: `提交失败：${err.message}`,
								showCancel: false,
							})
						},
						complete() {
							uni.hideLoading();
						}
					});

				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

		// uni.showModal({
		// 	title: '请确认',
		// 	content: '您确认提交吗？',
		// 	showCancel: true,
		// 	success({
		// 		confirm
		// 	}) {
		// 		if (confirm) {
		// 			console.log('confirm', state.data);
		// 		} else {
		// 			console.log('cancel')
		// 		}
		// 	}
		// })

		console.log(100, unref(state.data))
	}
</script>

<style>
	* {
		font-size: 20px;
	}

	view {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.j-page {
		padding:  0 20px;
	}

	.j-title-0 {
		text-align: center;
	}

	.j-message-1 {}

	.j-message-2 {
		text-indent: 2em;
	}

	.j-title-1 {
		font-weight: 700;
	}

	.j-title-2 {
		font-weight: 700;
		text-indent: 1em;
	}

	.j-item {
		padding: 5px 0;
		text-indent: 1em;
	}
</style>